<template>
  <div style="width: 1920px;background-color: white">
    <!-- 整个项目容器 -->
    <el-container>
      <el-header>
        <h1>LOGO</h1>

        <el-breadcrumb separator="/" style="float: right;line-height: 60px">
          <el-breadcrumb-item :to="{ path: '/' }" style="font-size: 20px"><a href="/">首页</a></el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">商城</a></el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">社区</a></el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">{{ this.info }}</a></el-breadcrumb-item>
          <el-breadcrumb-item>LOGO</el-breadcrumb-item>
        </el-breadcrumb>

      </el-header>
      <!-- 轮播图开始 -->
      <el-carousel>
        <el-carousel-item v-for="item in advertise" :key="item">
          <img :src="item.url" alt="">
        </el-carousel-item>
      </el-carousel>
      <!-- 轮播图结束 -->

      <!-- 商品展示开始 -->
      <el-container style="margin-top: 20px">
        <el-main style="margin: 0 auto;">
          <el-row>
            <el-col>
              <h1 style="font-size: 30px"><i class="el-icon-s-goods"></i>热销商品</h1>
            </el-col>
          </el-row>
          <el-row gutter="20">
            <el-col span="4" v-for="m in commodities">
              <el-card style="margin-top: 20px">
                <router-link :to="{path:'/sys-shopping/temp/details',query:{setid:m.id}}">
                  <img class="p_img" style="height: 230px;" width="100%" :src="m.url" alt="">
                </router-link>
                <div>
                  <a href="" style="margin-bottom: 10px;display: block">
                    <p style="font-size: 20px;font-weight: bold;">
                      <router-link :to="{path:'/sys-shopping/temp/details',query:{setid:m.id}}">
                        {{ m.title }}
                      </router-link>
                    </p>
                  </a>
                  ￥12 <s>123</s>
                  <span style="display: block; float: right">销量:123</span>
                </div>
              </el-card>

            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </el-container>
    <!-- 商品展示结束 -->

    <!-- 评论展示开始 -->
    <el-container style="margin-top:20px">
      <el-main>
        <el-row>
          <el-col>
            <h1 style="font-size: 30px"><i class="el-icon-s-comment"></i>热门帖子</h1>
          </el-col>
        </el-row>
        <el-row v-for="t in posts">
          <el-col>
            <el-col>
              <h1>{{ t.username }}</h1>
            </el-col>
            <p style="margin-left: 20px;font-size: 20px">{{ t.title }}</p>
            <el-row>
              <el-col span="6">
                <div class="demo-image__preview">
                  <el-image
                      style="width: 200px; height: 200px;margin-left: 40px"
                      :src="t.url"
                      :preview-src-list="srcList">
                  </el-image>
                </div>
              </el-col>

            </el-row>
            <el-row>
              <el-col>
                <p style="margin-left: 50px;float: left"><i class="el-icon-chat-dot-square"></i>评论{{ t.comment }} <i
                    class="el-icon-share" style="margin-left: 10px">分享{{ t.share }}</i><i
                    class="el-icon-thumb" style="margin-left: 10px">点赞{{ t.kudos }}</i>
                <p style="float: right">发布日期：{{ t.data }}</p>
              </el-col>
            </el-row>
            <el-divider>{{ t.username }}</el-divider>
          </el-col>
        </el-row>

      </el-main>
    </el-container>
    <!-- 评论展示结束 -->

    <el-container style="margin-top:20px">
      <el-footer>
        底部
      </el-footer>
    </el-container>
  </div>
</template>

<style>
a {
  text-decoration: none;
  color: black;
}

.el-breadcrumb__inner a:hover {
  color: rebeccapurple !important;
}

.el-header {
  background-color: #E6A23C;
  color: white;
  text-align: center;
  line-height: 60px;
}

.el-header h1 {
  float: left;
}

.el-header span {

}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>

<script>
export default {
  data() {
    return {
      /* 请求路径 */
      url: '176.212.26.22:9090',
      /* 登录的用户名 */
      info: '您还没有登录',
      /* 轮播图列 */
      advertise: [],
      /* 商品列 */
      commodities: [{title:"111",}],
      /* 帖子列 */
      posts: [],
      /* 帖子大图列 */
      srcList: []
    }
  },
  methods: {
    /* 获取商品 */
    getCommodities() {
      console.log("获取商品");
      /* 访问路径 */
      let url = 'http://'+this.url+'/portal/homes/item';
      console.log("url=" + url)
      this.axios.create({'headers' : {'Authorization' : localStorage.getItem("jwt")}}).get(url).then((response) => {
        let responseBody = response.data;
        console.log(responseBody);
        this.commodities = responseBody.data;
      })
    },
    /* 获取轮播图 */
    getRotating(){
      console.log("获取轮播图")
      /* 访问路径 */
      let url = 'http://176.212.26.22:9090/admins/list'
      console.log("url=" + url)
      this.axios.create({'headers' : {'Authorization' : localStorage.getItem("jwt")}}).get(url).then((response) => {
        let responseBody = response.data;
        console.log(responseBody);
        this.advertise = responseBody.data;
      })
    },
    /* 获取帖子 */
    getPosts(){
      console.log("获取帖子")
      /* 访问路径 */
      let url = 'http://176.212.26.22:9090/admins/list'
      console.log("url=" + url)
      this.axios.create({'headers' : {'Authorization' : localStorage.getItem("jwt")}}).get(url).then((response) => {
        let responseBody = response.data;
        console.log(responseBody);
        this.posts = responseBody.data;
        this.srcList = responseBody.data.url;
      })
    },
    /* 获取用户名称 */
    getUsername(){
      console.log("获取用户名称")
      /* 访问路径 */
      let url = 'http://176.212.26.22:9090/admins/list'
      console.log("url=" + url)
      this.axios.create({'headers' : {'Authorization' : localStorage.getItem("jwt")}}).get(url).then((response) => {
        let responseBody = response.data;
        console.log(responseBody);
        if (responseBody != null){
          this.info = responseBody.data;
        }else{
          this.info = '您还没有登录请登录';
        }

      })
    }
  },
  /* 加载页面时自启动 */
  mounted() {
    console.log("mounted...")
    this.getCommodities();
    this.getRotating();
    this.getPosts();
    this.getUsername();
  }
};
</script>


